<template>
	<view class="mine-level">
		<nav-header title="会员等级" :show-right="false">
		</nav-header>

		<view class="">
			<view class="bac-img">

				<view class="membership-level">
					<view class="level-item">
						<text>白银</text>
						<svg-icon icon="dui3" :width="20"></svg-icon>
						<svg-icon icon="get" :width="100" :height="12"></svg-icon>
					</view>
					<view class="level-item">
						<text>黄金</text>
						<svg-icon icon="no" :width="20"></svg-icon>
						<svg-icon icon="get" :width="100" :height="12" v-if="arrive"></svg-icon> <!-- 达到条件才显示 -->
						<svg-icon icon="not" :width="100" :height="12"></svg-icon>
					</view>
					<view class="level-item">
						<text>钻石</text>
						<svg-icon icon="no" :width="20"></svg-icon>
						<svg-icon icon="get" :width="100" :height="12" v-if="arrive"></svg-icon>
						<svg-icon icon="not" :width="100" :height="12"></svg-icon>
					</view>
					<view class="level-item">
						<svg-icon icon="no" :width="20"></svg-icon>
						<text>钻石MAX</text>
					</view>
				</view>

				<view class="membership-card">
					<view class="card">
						<image src="https://axure-file.lanhuapp.com/md5__88153c00fca95c7b423f183546db02f4.svg" mode=""
							class="card-img"></image>
						<view class="title silver">
							<text>白银会员LV1</text>
						</view>
						<view class="info silver">
							<text>邀请5人可升至黄金会员</text>
							<up-line-progress :percentage="50" height="4" :showText="false"
								activeColor="#4A6E9E"></up-line-progress>
						</view>
					</view>
					<view class="card">
						<view class="mask" v-if="!arrive"></view>
						<image src="https://axure-file.lanhuapp.com/md5__b7a331ee45a4506aa59a1908d7271c07.svg" mode=""
							class="card-img"></image>
						<view class="title gold">
							<text>黄金会员LV2</text>
						</view>
						<view class="info gold" v-if="arrive">
							<text>邀请5人可升至钻石会员</text>
							<up-line-progress :percentage="50" height="4" :showText="false"
								activeColor="#EAB53B"></up-line-progress>
						</view>
					</view>
					<view class="card">
						<view class="mask" v-if="!arrive"></view>
						<image src="https://axure-file.lanhuapp.com/md5__19b2b34c2b472fed1874196afeb3104e.svg" mode=""
							class="card-img"></image>
						<view class="title diamonds">
							<text>钻石会员LV3</text>
						</view>
						<view class="info diamonds" v-if="arrive">
							<text>邀请5人可升至满级钻石会员</text>
							<up-line-progress :percentage="50" height="4" :showText="false"
								activeColor="#424C82"></up-line-progress>
						</view>
					</view>
					<view class="card">
						<view class="mask" v-if="!arrive"></view>
						<image src="https://axure-file.lanhuapp.com/md5__19b2b34c2b472fed1874196afeb3104e.svg" mode=""
							class="card-img"></image>
						<view class="title diamonds">
							<text>钻石会员LV3</text>
							<text>MAX LEVEL</text>
						</view>
						<view class="max diamonds">
							<text>您已升至满级，感谢您对平台的支持</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arrive: false,
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="less" scoped>
	.mine-level {
		width: 100vw;
		height: 2050rpx;
		background-color: #4D4E59;
	}

	.bac-img {
		width: 100%;
		height: 350rpx;
		background-image: url(https://axure-file.lanhuapp.com/md5__e8042467ad48f970dadb6f0eacd2d927.png);
		background-size: 100%;
		position: relative;

		.membership-level {
			// position: absolute;
			// bottom: 0;
			width: 100%;
			height: 350rpx;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			color: #fff;

			.level-item {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
			}
		}

		.membership-card {
			padding: 0 30rpx;
			padding-bottom: 30rpx;

			.card {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				margin-top: 30rpx;
				z-index: 0;

				.mask {
					border-radius: 20rpx;
					background-color: #555555;
					opacity: 0.9;
					position: absolute;
					top: 0;
					left: 35rpx;
					width: 90%;
					height: 100%;
					z-index: 1
				}

				.card-img {
					width: 90%;
					height: 320rpx;

				}

				.title {
					display: flex;
					flex-direction: column;
					position: absolute;
					top: 30rpx;
					left: 70rpx;
					font-size: 50rpx;
					font-weight: 600;
				}

				.silver {
					color: #4A6E9E;
				}

				.gold {
					color: #EAB53B;
				}

				.diamonds {
					color: #424C82;
				}

				.info {
					position: absolute;
					bottom: 30rpx;
					left: 70rpx;
					width: 350rpx;

					text {
						font-size: 26rpx;
					}
				}

				.max {
					position: absolute;
					bottom: 30rpx;
					left: 70rpx;
					width: 400rpx;
					font-size: 20rpx;
					font-weight: 600;
				}
			}
		}
	}
</style>